<template>
  <div class="login-title">
    <img class="logo" src="@/assets/image/logo3.png" alt="logo" />
  </div>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="loginForm" label-position="top">
    <el-form-item label="用户名" prop="username">
      <el-input placeholder="请输入用户名" autoComplete="off" style="position: relative" v-model="ruleForm.username"
        @keyup.enter.native="submitForm(ruleFormRef)" clearable>
        <template #prefix>
          <el-icon class="el-input__icon">
            <UserFilled />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" style="margin-top: 20px;">
      <el-input placeholder="请输入密码" autoComplete="off" @keyup.enter.native="submitForm(ruleFormRef)"
        v-model="ruleForm.password" :type="passwordType">
        <template #prefix>
          <el-icon class="el-input__icon">
            <GoodsFilled />
          </el-icon>
        </template>
        <template #suffix>
          <div class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </div>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button :loading="loading" class="login-btn" type="primary" round @click="submitForm(ruleFormRef)">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import {
  onMounted,
  reactive,
  ref,
  watch
} from 'vue';

import type { FormInstance } from 'element-plus';
import { ElNotification } from 'element-plus';
import JSEncrypt from 'jsencrypt';
import { useRouter } from 'vue-router';

import { publickey } from '@/api/modules/user';
import { useUserStore } from '@/store/modules/user';
import { getTimeStateStr } from '@/utils/index';

const router = useRouter()
const UserStore = useUserStore()
const ruleFormRef = ref<FormInstance>()
const passwordType = ref('password')
const loading = ref(false)
const title = ref(import.meta.env.VITE_TITLE)
const rules = reactive({
  username: [{ required: true, message: "请输入用户名 ", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
})

// 表单数据
const ruleForm = reactive({
  username: 'import.meta.env.VITE_ZH',
  password: '',
})

// 显示密码图标
const showPwd = () => {
  passwordType.value = passwordType.value === 'password' ? '' : 'password'
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let passwords
      loading.value = true
      // try {
      //   const res = await publickey()
      //   passwords = encryption(ruleForm.password, res.data)
      // } catch (error) {
      //   loading.value = false
      //   return
      // }
      // 登录
      const formData = new FormData()
      formData.append('username', ruleForm.username)
      formData.append('password', passwords)
      formData.append('scope', 'server')
      formData.append('client_id', 'hjw')
      formData.append('client_secret', 'hjw')
      try {
        UserStore.login(formData).then(async () => {
          await router.push({
            path: '/',
          })
          ElNotification({
            title: getTimeStateStr(),
            message: "欢迎登录" + import.meta.env.VITE_TITLE,
            type: "success",
            duration: 3000
          });
          loading.value = false
        }).catch(error => {
          loading.value = false
        })
      } catch {
        loading.value = false
      }
    } else {
      return false
    }
  })
}
function encryption(password, key) {
  const jse = new JSEncrypt();
  // 公匙，由后端返回到前台
  jse.setPublicKey(key)
  return jse.encrypt(password)
}
watch(() => ruleForm.username, (val) => {
  if (!val) {
    ruleForm.password = ''
  }
}, { deep: true })
onMounted(() => {
  ruleForm.username = import.meta.env.VITE_ZH
  ruleForm.password = import.meta.env.VITE_MI
})
</script>

<style lang="scss" scoped>
@import "../index.scss";

.login-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.logo {
  width: 208px;
  height: 68px;
  // 图片失真问题处理
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.loginForm {
  :deep(.el-input) {
    --el-input-border-radius: 50px;
    // --el-input-border-color: #0CA898;
  }

  :deep(.el-button--primary) {
    --el-button-bg-color: #0CA898;
    --el-button-border-color: #0CA898;
    --el-button-outline-color: #0CA898;
    --el-button-active-color: #0CA898;
    --el-button-hover-text-color: #fff;
    --el-button-hover-link-text-color: #fff;
    --el-button-hover-bg-color: #0ca898a1;
    --el-button-hover-border-color: #0ca898a1;
    --el-button-active-bg-color: #0CA898;
    --el-button-active-border-color: #0CA898;
    --el-button-disabled-text-color: #fff;
    --el-button-disabled-bg-color: #0ca89870;
    --el-button-disabled-border-color: #0ca89870;
  }

  :deep(.el-form-item--default) {
    font-weight: 600;
    // color: black;
  }
}
</style>
